import React, {useState} from 'react';
import {useParams} from "react-router-dom";
import {Button, DatePicker, Divider, Image, Input, Toast} from "antd-mobile";
import qwbj from '../../asset/img/qwbj.jpg';
import gjmcIcon from '../../asset/img/gjmc-icon.jpg';
import mfjcIcon from '../../asset/img/mfjc-icon.jpg';
import qwbjIcon from '../../asset/img/qwbj-icon.jpg';


import m_chezhibao from '../../asset/img/m_chezhibao.png';
import m_guanzi from '../../asset/img/m_guanzi.png';
import m_haoche from '../../asset/img/m_haoche.png';
import m_kaixin from '../../asset/img/m_kaixin.png';
import m_maimai from '../../asset/img/m_maimai.png';
import m_renren from '../../asset/img/m_renren.png';
import m_tiantian from '../../asset/img/m_tiantian.png';

import process1 from '../../asset/img/process1.jpg';
import process2 from '../../asset/img/process2.jpg';
import process3 from '../../asset/img/process3.jpg';
import CitySelect from "../../components/CitySelect";
import {getTagImgBySourceAndCity, h5Add} from "../../api/request";
import CarBrandSeriesSelect from "../../components/CarBrandSeriesSelect";
import CarModelSelect from "../../components/CarModelSelect";
import dayjs from "dayjs";


function Index(props) {
    const params = useParams();


    const [phone, setPhone] = useState()
    const [city, setCity] = useState('城市')
    const [tagImgList, setTagImgList] = useState([])
    const [citySelectVisible, setCitySelectVisible] = useState(false)
    const [brandSeriesSelectVisible, setBrandSeriesSelectVisible] = useState(false)
    const [firstRegTimeVisible, setFirstRegTimeVisible] = useState(false)
    const [firstRegTime, setFirstRegTime] = useState()
    const [mileage, setMileage] = useState(null)
    const [carModelSelectVisible, setCarModelSelectVisible] = useState(false)
    const [carModelName, setCarModelName] = useState("")
    const [brandName, setBrandName] = useState("")
    const [serries, setSeries] = useState({})
    const [bsName, setBsName] = useState("")
    const [submitLoading, setSubmitLoading] = useState(false)
    const clickCity = () => {
        setCitySelectVisible(true);
    }
    const clickBeiAn = () => {
        window.location = "https://beian.miit.gov.cn/"
    }

    const onSelectHandler = (item) => {
        setCity(item);
        setCitySelectVisible(false);
        searchTagImg(item)
    }

    const searchTagImg = (city) => {
        getTagImgBySourceAndCity(params.source, city).then(res => {
            if (res.success) {
                setTagImgList(res.result)
            } else {
                Toast.show({
                    content: res.message,
                })
            }
        })
    }
    const onSubmit = () => {
        if (city == '城市') {
            Toast.show({
                content: "请选择城市",
            })
            return;
        }

        if (!phone) {
            Toast.show({
                content: "请输入手机号",
            })
            return;
        } else {
            if (!(/^1[23456789]\d{9}$/.test(phone))) {
                Toast.show({
                    content: "手机号码有误",
                })
                return;
            }
        }

        console.log("品牌", brandName, "车系", serries?.name, "车型", carModelName, "首次上牌时间", firstRegTime ? dayjs(firstRegTime).format('YYYY-MM-DD') : '',)
        setSubmitLoading(true)
        h5Add({
            phone, source: params.source,
            city,
            brandName,
            seriesName: serries?.name,
            specName: carModelName,
            firstRegTime: firstRegTime ? dayjs(firstRegTime).format('YYYY-MM-DD') : '',
            mileage
        }).then(res => {
            if (res.success) {
                Toast.show({
                    content: res.message,
                })
                setCity("城市");
                setPhone("");
                setTagImgList([]);
                setCarModelName("");
                setBrandName("")
                setSeries({})
                setBsName("")
                setFirstRegTime(null)
                setMileage('')
            } else {
                Toast.show({
                    content: res.message,
                })
            }
        }).finally(() => {
            setSubmitLoading(false)
        })


    }
    const onBrandSeriesHandler = (brand, fac, ser) => {
        console.log(brand, fac, ser)
        setBrandName(brand.name)
        setSeries(ser)
        setBsName(`${brand.name} ${ser.name}`)
        setBrandSeriesSelectVisible(false)
        setCarModelName("")

    }
    const onBrandClear = () => {
        setBrandName("")
        setSeries({})
        setBsName("")
        setCarModelName("")
    }

    const onCarModelClear = () => {
        setCarModelName("")
    }
    const clickCarModel = () => {
        if (!serries?.id) {
            Toast.show({
                content: "请选择品牌车系",
            })
            return
        }
        setCarModelSelectVisible(true);

        console.log(serries.id)
    }

    const onCarModelHandler = (model) => {
        setCarModelSelectVisible(false);
        setCarModelName(model.name)

    }
    return (
        <div className=" ">
            <Image src={qwbj} height={230} fit='fill'/>
            <div className="m-2.5">
                <div className="flex justify-around p-2.5 mb-2.5">
                    <div className="flex flex-col w-20 h-[100px] justify-around items-center">
                        <Image src={gjmcIcon} width={71} height={71} fit='fill'/>
                        <span className="text-sm">高价卖车</span>
                    </div>
                    <div className="flex flex-col w-20 h-[100px] justify-around items-center">
                        <Image src={qwbjIcon} width={71} height={71} fit='fill'/>
                        <span className="text-sm">全网比价</span>
                    </div>
                    <div className="flex flex-col w-20 h-[100px] justify-around items-center">
                        <Image src={mfjcIcon} width={71} height={71} fit='fill'/>
                        <span className="text-sm">免费检测</span>
                    </div>
                </div>
                {/*  form 表单*/}
                <div className="flex  items-center bg-white px-4 py-2 border rounded-full ">
                    <div className="text-base w-20 text-[#4781ea] text-center cursor-pointer"
                         onClick={clickCity}>{city}</div>
                    <div className="border-l border-stone-200 h-6 w-0.5 mx-2"></div>
                    <div className="flex-1 ">
                        <Input

                            maxlength={11}
                            type='tel'
                            value={phone}
                            onChange={(value) => setPhone(value)}
                            style={{
                                '--color': '#666',
                                '--font-size': '14px',
                                '--placeholder-color': '#666',
                            }} placeholder='请输入手机号'/>
                    </div>
                </div>

                <div className="mt-3 flex  items-center bg-white px-4 py-2 border rounded-full ">
                    <div className="text-base w-20  text-center text-[#4781ea]  cursor-pointer"
                         onClick={() => setBrandSeriesSelectVisible(true)}>品牌车系
                    </div>
                    <div className="border-l border-stone-200 h-6 w-0.5 mx-2"></div>
                    <div className="flex-1 ">
                        <Input
                            onClear={onBrandClear}
                            clearable
                            value={bsName}


                            style={{
                                '--color': '#666',
                                '--font-size': '14px',
                                '--placeholder-color': '#666',
                            }} placeholder='请选择品牌车系'/>
                    </div>
                </div>


                <div className="mt-3 flex  items-center bg-white px-4 py-2 border rounded-full ">
                    <div className="text-base w-20  text-center  text-[#4781ea] cursor-pointer"
                         onClick={clickCarModel}>选择车型
                    </div>
                    <div className="border-l border-stone-200 h-6 w-0.5 mx-2"></div>
                    <div className="flex-1 ">
                        <Input
                            onClear={onCarModelClear}
                            clearable
                            onChange={(val)=>setCarModelName(val)}
                            value={carModelName}
                            style={{
                                '--color': '#666',
                                '--font-size': '14px',
                                '--placeholder-color': '#666',
                            }} placeholder='请选择车型'/>
                    </div>
                </div>


                <div className="mt-3 flex  items-center bg-white px-4 py-2 border rounded-full ">
                    <div className="text-base w-20  text-center    cursor-pointer">上牌时间
                    </div>
                    <div className="border-l border-stone-200 h-6 w-0.5 mx-2"></div>
                    <div className="flex-1 ">
                        <Input
                            onClick={() => setFirstRegTimeVisible(true)}
                            onClear={() => setFirstRegTime(null)}
                            clearable
                            value={firstRegTime ? dayjs(firstRegTime).format('YYYY-MM-DD') : ''}
                            style={{
                                '--color': '#666',
                                '--font-size': '14px',
                                '--placeholder-color': '#666',
                            }} placeholder='请选择首次上牌时间'/>
                    </div>
                </div>


                <div className="mt-3 flex  items-center bg-white px-4 py-2 border rounded-full ">
                    <div className="text-base w-20  text-center    cursor-pointer">行驶里程
                    </div>
                    <div className="border-l border-stone-200 h-6 w-0.5 mx-2"></div>
                    <div className="flex-1 ">
                        <Input
                            value={mileage}
                            type="number"
                            clearable
                            onClear={() => setMileage(null)}
                            onChange={value => setMileage(value)}
                            style={{
                                '--color': '#666',
                                '--font-size': '14px',
                                '--placeholder-color': '#666',
                            }} placeholder='请输入行驶里程,单位:万公里'/>
                    </div>
                </div>


                {/*    地图对应图片*/}
                <div className="grid gap-2  grid-cols-3 mt-5">
                    {/**/}
                    {tagImgList.map(item => <Image key={item}
                        // src={`http://localhost:8080/haisuoshuju/sys/common/static/${item}`}
                                                   src={item}
                                                   width={97} height={35} fit='fill'/>)}

                </div>
                {/*    提交*/}
                <div className="mt-5 bg-[#f8fbff] rounded-t-[24px] ">
                    <Button block color='primary' shape='rounded' size='large' onClick={onSubmit} loading={submitLoading}>
                        <span className="text-base">提交</span>
                    </Button>
                    <div className="mt-5 px-4 text-[11px]">
                        提示：您点击提交快速卖车按钮后，默认您已经同意由海索数据合作平台与您联系并提供相关服务。
                    </div>
                </div>

                {/*卖车平台*/}
                <div className="mt-5">
                    <Divider
                        style={{
                            color: '#1677ff',
                            borderColor: '#1677ff',
                            borderStyle: 'dashed',
                        }}
                    >
                        <span className="underline">卖车平台</span>
                    </Divider>
                    <div className="grid gap-2  grid-cols-4 mt-5">
                        <Image src={m_guanzi} width={68} height={30} fit='fill'/>
                        <Image src={m_renren} width={68} height={30} fit='fill'/>
                        <Image src={m_chezhibao} width={68} height={30} fit='fill'/>
                        <Image src={m_tiantian} width={68} height={30} fit='fill'/>
                        <Image src={m_maimai} width={68} height={30} fit='fill'/>
                        <Image src={m_haoche} width={68} height={30} fit='fill'/>
                        <Image src={m_kaixin} width={68} height={30} fit='fill'/>
                    </div>

                </div>
                {/*卖车流程*/}
                <div className=" mt-5">
                    <Divider
                        style={{
                            color: '#1677ff',
                            borderColor: '#1677ff',
                            borderStyle: 'dashed',
                        }}
                    >
                        <span className="underline">卖车流程</span>
                    </Divider>

                    <div className="mt-5 bg-white rounded-b-[24px] ">
                        <div className="grid gap-1 mt-5 p-6  ">
                            {/*提交信息*/}
                            <div className="flex">
                                <Image src={process1} width={47} height={47} fit='fill'/>
                                <div className="ml-6">
                                    <div className="flex">
                                        <div className="text-[#1677ff] italic">1</div>
                                        <div className="ml-4">提交信息</div>
                                    </div>
                                    <div
                                        className="mt-1 text-[13px] text-[#8a8a8a] leading-6">提交联系方式后，平台客服第一时间与您联系
                                    </div>
                                </div>
                            </div>

                            {/*免费检测*/}
                            <div className="flex">
                                <Image src={process2} width={47} height={47} fit='fill'/>
                                <div className="ml-6">
                                    <div className="flex">
                                        <div className="text-[#1677ff] italic">2</div>
                                        <div className="ml-4">免费检测</div>
                                    </div>
                                    <div
                                        className="mt-1 text-[13px] text-[#8a8a8a] leading-6">与平台预约免费检测，检测通过后发布到合作平台
                                    </div>
                                </div>
                            </div>

                            {/*完成交易*/}

                            <div className="flex">
                                <Image src={process3} width={47} height={47} fit='fill'/>
                                <div className="ml-6">
                                    <div className="flex">
                                        <div className="text-[#1677ff] italic">3</div>
                                        <div className="ml-4">完成交易</div>
                                    </div>
                                    <div
                                        className="mt-1 text-[13px] text-[#8a8a8a] leading-6">意向买家联系购车，快速成交
                                    </div>
                                </div>
                            </div>
                        </div>
                        <Button block color='primary' shape='rounded' size='large'>
                            <span className="text-base">快速卖车</span>
                        </Button>

                    </div>

                </div>
                <div className=" my-5 text-center">
                    <a onClick={clickBeiAn}>鲁ICP备2023034393号</a>
                </div>
            </div>

            <CitySelect visible={citySelectVisible} onBackHandler={() => setCitySelectVisible(false)}
                        onSelectHandler={onSelectHandler}></CitySelect>
            <CarBrandSeriesSelect visible={brandSeriesSelectVisible}
                                  onBackHandler={() => setBrandSeriesSelectVisible(false)}
                                  onSelectHandler={onBrandSeriesHandler}></CarBrandSeriesSelect>
            <CarModelSelect seriesId={serries.id} visible={carModelSelectVisible}
                            onBackHandler={() => setCarModelSelectVisible(false)}
                            onSelectHandler={onCarModelHandler}> </CarModelSelect>


            <DatePicker
                title='时间选择'
                visible={firstRegTimeVisible}
                value={firstRegTime}
                onClose={() => {

                    setFirstRegTimeVisible(false)
                }}
                min={dayjs('1970-01-01').toDate()}
                max={new Date()}
                onConfirm={val => setFirstRegTime(val)}

            />
        </div>
    );
}

export default Index;
